<template>
  <div id="app">
    <div class="controlBar" @click="show = !show">
      <img v-if="show == false" src="./assets/closeLogo.gif" />
      <img v-if="show == true" src="./assets/closeActive.gif" />
      <transition
        enter-active-class="animate__animated animate__bounceInRight"
        leave-active-class="animate__animated animate__bounceOutRight"
      >
        <div class="controlButton" v-if="show">
          <router-link to="/">
            <van-icon color="white" size="0.6rem" name="wap-home-o" />
          </router-link>
          <router-link to="/cart">
            <van-icon color="white" size="0.6rem" name="shopping-cart-o" />
          </router-link>
          <router-link to="/my">
            <van-icon color="white" size="0.6rem" name="user-circle-o" />
          </router-link>
        </div>
      </transition>
    </div>

    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  created() {}
};
</script>

<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding-bottom: 2rem;
  position: relative;
  .controlBar {
    width: 1.2rem;
    height: 1.2rem;
    position: fixed;
    border-radius: 50%;
    right: 0.6rem;
    bottom: 2.6rem;
    z-index: 150;
    .controlButton {
      position: absolute;
      left: -3.2rem;
      width: 3rem;
      height: 1.2rem;
      border-radius: 30px;
      background: rgb(244, 73, 57);
      top: 0;
      display: flex;
      justify-content: flex-start;
      z-index: 5;
      a {
        width: 33%;
        .van-icon {
          line-height: 1.2rem;
        }
      }
    }
    img {
      width: 100%;
      height: 100%;
      transform: rotate(90deg);
      border-radius: 50%;
      overflow: hidden;
    }
  }
}
</style>
